<template>
  <div>
    <div class="baseLogin">

      <!-- Unnamed (动态面板)-->
      <div id="u292" class="ax_default" style="left: -730.5px; width: 2781px;">
        <div id="u292_state0" class="panel_state" data-label="State1" style="width: 2781px;">
          <div id="u292_state0_content" class="panel_state_content" style="margin-left: 730.5px;">
          </div>
        </div>
      </div>

      <div id="u328" class="ax_default box_2">
        <div id="u328_div" class=""></div>
        <div id="u328_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <div id="u329" class="ax_default line">
        <img id="u329_img" class="img " src="@/components/css/images/login/u329.svg">
        <div id="u329_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- 注册选项 -->
      <div class="login-options">
        <div id="u330" class="ax_default _三级标题 selected" selectiongroup="tab" style="cursor: pointer;">
          <div id="u330_text" class="text ">
            <p><span><el-link @click="handleClickToLogin()" :underline="false">账号登录</el-link></span></p>
          </div>
        </div>
        <div id="u331" class="ax_default _三级标题 selected" selectiongroup="tab" style="cursor: pointer;">
          <div id="u331_div" class="selected" tabindex="0"></div>
          <div id="u331_text" class="text ">
            <p id="cache2"><span id="cache3" style="color: rgb(255, 110, 144);">用户注册</span></p>
          </div>
        </div>
      </div>

      <div class="login-container">
        <el-form ref="loginForm" class="login-form" :model="loginForm">

          <!-- 用户名输入框 -->
          <el-form-item>
            <el-input v-model="loginForm.accountName" placeholder="请输入用户名" style="color: rgb(153, 153, 153);">
              <template slot="prefix">
                <i style="font-size:20px" class="el-icon-user"></i>
              </template>
            </el-input>
          </el-form-item>

          <!-- 密码输入框 -->
          <el-form-item>
            <el-input v-model="loginForm.password" placeholder="请输入密码" maxlength="6"
                      style="color: rgb(153, 153, 153);">
              <template slot="prefix">
                <i style="font-size:20px" class="el-icon-key"></i>
              </template>
            </el-input>
          </el-form-item>

          <!-- 确认密码输入框 -->
          <el-form-item>
            <el-input v-model="loginForm.confirmPassword" placeholder="请再次输入密码"
                      style="color: rgb(153, 153, 153);">
              <template slot="prefix">
                <i style="font-size:20px" class="el-icon-key"></i>
              </template>
            </el-input>
          </el-form-item>

          <!-- 注册按钮 -->
          <el-form-item style="text-align: center;">
            <el-button type="primary" style="cursor: pointer; font-size: 20px; width: 200px; height: 60px;"
                       @click="register()">
              <span>点击注册</span>
            </el-button>
          </el-form-item>

        </el-form>
      </div>

    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  data() {
    return {
      loginForm: {
        accountName: '',
        password: '',
        confirmPassword: '',
        accountType: '02'
      }
    };
  },
  methods: {
    handleClickToLogin() {
      // 跳转到Login
      this.$router.push('/login');
    },
    register() {
      // 在此处添加注册逻辑
      if (this.loginForm.password !== this.loginForm.confirmPassword) {
        Message({
          type: "error",
          message: "两次输入的密码不一致，请重新输入！",
          duration: 1000
        });
        return;
      }

      // 检查用户名是否为空
      if (this.loginForm.username === '') {
        Message({
          type: "error",
          message: "请输入用户名！",
          duration: 1000
        });
        return;
      }

      // 检查密码是否为空
      if (this.loginForm.password === '') {
        Message({
          type: "error",
          message: "请输入密码！",
          duration: 1000
        });
        return;
      }


      let params = new URLSearchParams();
      params.append("accountName", this.loginForm.accountName);
      params.append("password", this.loginForm.password);
      params.append("accountType", this.loginForm.accountType);

      this.$axios.post('/api/register', params)
          .then(response => {
            if (response.data.code === 200) {
              Message({
                type: "success",
                message: "注册成功！",
                duration: 1000
              });
              this.$router.push("/login")
            } else {
              Message({
                type: "error",
                message: "注册失败，用户已存在！",
                duration: 1000
              });
            }
          })
          .catch(error => {
            Message({
              type: "error",
              message: "注册时发生错误：" + error.msg,
              duration: 1000
            });
          });
    }
  }
};
</script>

<style scoped>
.login-container {
  text-align: left;
  margin: auto;
  margin-top: 180px;
  width: 350px;
  padding: 15px 35px 15px 35px;
  position: absolute;
  top: 130px;
  left: 790px;
}

.login-title {
  margin: 0px auto 48px auto;
  text-align: center;
  font-size: 40px;
}

.svg-container {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.svg-img {
  width: 100%;
  height: 100%;
}

.primary-button {
  width: 100%;
}

.el-button--primary {
  color: #FFF;
  background-color: rgba(255, 110, 144, 1);
  border-color: #ff6e90;
}

.login-container[data-v-5c6101e4] {
  text-align: left;
  margin: auto;
  margin-top: 150px;
  width: 350px;
  padding: 15px 35px 15px 35px;
  position: absolute;
  top: 130px;
  left: 790px;
  padding-inline: 30px;
}

.login-container[data-v-5c6101e4][data-v-5c6101e4] {
  padding: 55px 30px 15px 35px;
}


</style>